<template>
  <el-dialog :close-on-click-modal='false' v-drag :title="$t('编辑')" :v-if="dialogVisible" :visible.sync="dialogVisible" :width="lang === 'zh'?'520px':'720px'" top="10vh" @close='close'>
    <div class="dialogContentBoxMaxHeight80 strategyFlowFrom">
      <el-form ref="form" :model="record" :inline="true" :label-width="lang === 'zh'?'130px':'240px'" :rules="rules" label-position="left" style="margin:0 20px;">
        <el-form-item :label="$t('流量监控策略状态')" prop="state">
          <el-radio-group v-model="record.state">
            <el-radio label="enable" class="enable">{{$t('启用')}}</el-radio>
            <el-radio label="disable" class="disable">{{$t('禁用')}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('流量告警动作')" prop="actions" class="flowInputActions">
          <el-input v-emoji v-model="name" :disabled='true' style="width: 260px;" size='small'></el-input>
          <el-tooltip class="iecTooltip" effect="light" :content="nameTip" placement="top">
            <i class="el-icon-warning iecWarningIcon"></i>
          </el-tooltip>
        </el-form-item>
        <el-form-item :label="$t('速率向上振幅(%)')" prop="upper-limit" v-if="['mutation'].includes(record['action-name'])">
          <el-input v-emoji v-model="record['upper-limit']" ref="upperLimit" key="upperLimit" :disabled='record.state === "disable"' style="width: 260px;" size='small'></el-input>
        </el-form-item>
        <el-form-item :label="$t('速率向下振幅(%)')" prop="lower-limit" v-if="['mutation'].includes(record['action-name'])">
          <el-input v-emoji v-model="record['lower-limit']" ref="lowerLimit" key="lowerLimit" :disabled='record.state === "disable"' style="width: 260px;" size='small'></el-input>
        </el-form-item>
        <el-form-item :label="$t('速率下边缘值(KB/s)')" prop="lower-edge" v-if="['silence'].includes(record['action-name'])">
          <el-input v-emoji v-model="record['lower-edge']" ref="lowerEdge" key="lowerEdge" :disabled='record.state === "disable"' style="width: 260px;" size='small'></el-input>
        </el-form-item>
        <el-form-item :label="$t('静默持续时间(分钟)')" prop="silence-duration" v-if="['silence'].includes(record['action-name'])">
          <el-input v-emoji v-model="record['silence-duration']" ref="silenceDuration" key="silenceDuration" :disabled='record.state === "disable"' style="width: 260px;" size='small'></el-input>
        </el-form-item>
        <el-form-item :label="$t('速率告警阀值(Mb/s)')" prop="rate-threshold" v-if="['overflow'].includes(record['action-name'])">
          <el-input v-emoji v-model="record['rate-threshold']" ref="rateThreshold" key="rateThreshold" :disabled='record.state === "disable"' style="width: 260px;" size='small'></el-input>
        </el-form-item>
        <el-form-item :label="$t('告警严重等级')" prop="severity">
          <el-radio-group v-model="record.severity" :disabled='record.state === "disable"'>
            <el-radio label="critical" class="critical">{{$t('紧急')}}</el-radio>
            <el-radio label="major" class="major">{{$t('重要')}}</el-radio>
            <el-radio label="minor" class="minor">{{$t('次要')}}</el-radio>
            <el-radio label="warning" class="warning">{{$t('提示')}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('告警声音开关')" prop="alarm-voice">
          <el-radio-group v-model="record['alarm-voice']" :disabled='record.state === "disable"'>
            <el-radio label="on" class="on">{{$t('开')}}</el-radio>
            <el-radio label="off" class="off">{{$t('关')}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('告警信息发送方式')" prop="alarm-method">
          <el-radio-group v-model="record['alarm-method']" :disabled='record.state === "disable"'>
            <el-radio label="none" class="none">{{$t('无')}}</el-radio>
            <el-radio label="smtp" class="smtp">SMTP</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('告警接收者')" prop="reciver">
          <el-input v-emoji v-model="record.reciver" ref="reciver" key="reciver" :disabled='record.state === "disable" || record["alarm-method"] === "none"' style="width:260px;" size='small'></el-input>
        </el-form-item>
        <el-form-item :label="$t('告警时间间隔')" prop="interval" v-if="['overflow', 'strategy'].includes(record['action-name'])">
          <el-input v-emoji v-model="record.interval" ref="interval" key="interval" :disabled='record.state === "disable"' style="width:260px;" size='small'></el-input>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submit" class="addSubmit">{{$t('确 定')}}</el-button>
      <el-button @click="close" class="addClose">{{$t('取 消')}}</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { editFlowAlert } from '@/api/system/alarm/strategy'
import { inputClass } from '@/utils/input-class.js'
export default {
  name: 'ConfigDialog',
  data () {
    var validateName = (rule, value, callback) => {
      if (String(value).trim() === '') {
        callback(new Error(this.$t('不能为空')))
      } else {
        callback()
      }
    }
    var validateReciver = (rule, value, callback) => {
      let email = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/
      if (value === '') {
        callback()
      } else if (email.test(value)) {
        callback()
      } else {
        callback(new Error(this.$t('请输入邮箱格式')))
      }
    }
    return {
      dialogVisible: false,
      lang: this.$i18n.locale,
      record: {
        state: 'disable',
        'action-name': 'mutation',
        'upper-limit': '',
        'lower-limit': '',
        severity: 'warning',
        'alarm-voice': 'on',
        'alarm-method': 'none',
        reciver: '',
        'lower-edge': '',
        'silence-duration': '',
        'rate-threshold': '',
        interval: ''
      },
      recordCopy: {
        state: 'disable',
        'action-name': 'mutation',
        'upper-limit': '',
        'lower-limit': '',
        severity: 'warning',
        'alarm-voice': 'on',
        'alarm-method': 'none',
        reciver: '',
        'lower-edge': '',
        'silence-duration': '',
        'rate-threshold': '',
        interval: ''
      },
      name: '',
      nameTip: '',
      nameList: {
        'mutation': this.$t('接口流量突变'),
        'silence': this.$t('接口流量静默'),
        'overflow': this.$t('接口流量溢出'),
        'strategy': this.$t('策略流量监控')
      },
      nameTipList: {
        'mutation': this.$t('接口速率变化振幅超过指定百分比'),
        'silence': this.$t('接口速率持续一段时间低于下边缘值'),
        'overflow': this.$t('接口速率大于告警阀值'),
        'strategy': this.$t('策略流量监控开关')
      },
      rules: {
        state: [{ required: false, validator: validateName, trigger: 'blur' }],
        'action-name': [{ required: false, validator: validateName, trigger: 'blur' }],
        'severity': [{ required: false, validator: validateName, trigger: 'blur' }],
        'alarm-voice': [{ required: false, validator: validateName, trigger: 'blur' }],
        reciver: [{ required: false, validator: validateReciver, trigger: 'blur' }],
        'alarm-method': [{ required: false, validator: validateName, trigger: 'blur' }]
      }
    }
  },
  methods: {
    init (data) {
      this.dialogVisible = true
      if (data) {
        this.record = Object.assign(this.record, data)
        this.name = this.nameList[this.record['action-name']]
        this.nameTip = this.nameTipList[this.record['action-name']]
        this.$nextTick(() => {
          inputClass(this.$refs, ['reciver'])
          switch (this.record['action-name']) {
            case 'mutation':
              inputClass(this.$refs, ['upperLimit', 'lowerLimit'])
              break
            case 'silence':
              inputClass(this.$refs, ['lowerEdge', 'silenceDuration'])
              break
            case 'overflow':
              inputClass(this.$refs, ['rateThreshold', 'interval'])
              break
            case 'strategy':
              inputClass(this.$refs, ['interval'])
              break
          }
        })
      }
    },
    submit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          editFlowAlert(this.record).then(res => {
            if (res.status === 0) {
              this.$message({
                message: this.$t('编辑成功'),
                type: 'success'
              })
              this.close()
              this.$parent.listData()
            }
          })
        }
      })
    },
    close () {
      this.dialogVisible = false
      this.record = Object.assign({}, this.recordCopy)
      this.$refs.form.resetFields()
    },
    changeSelect (data) {
      this.record.port = this.encryptionPort[data]
    }
  }
}
</script>
<style lang='less'>
.flowInputActions {
  .el-input.is-disabled .el-input__inner {
    background-color: #fff !important;
    color: #606266 !important;
  }
}
</style>
